<template>
    <div class="vaccination-page">
        <page-header title="预防接种服务" />

        <div class="page-content">
            <div class="banner">
                <img src="/images/vaccination-banner.jpg" alt="疫苗接种" class="banner-img" />
            </div>

            <div class="section">
                <div class="section-title">热门疫苗</div>
                <van-grid :column-num="3" :border="false" :gutter="10">
                    <van-grid-item v-for="(vaccine, index) in hotVaccines" :key="index"
                        @click="onVaccineClick(vaccine)">
                        <div class="vaccine-item">
                            <van-image :src="vaccine.image" width="40" height="40" radius="4" />
                            <span class="vaccine-name">{{ vaccine.name }}</span>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>

            <div class="section">
                <div class="section-title">疫苗分类</div>
                <van-cell-group inset>
                    <van-cell v-for="(category, index) in vaccineCategories" :key="index" :title="category.name" is-link
                        @click="onCategoryClick(category)" />
                </van-cell-group>
            </div>

            <div class="section">
                <div class="section-title">接种须知</div>
                <div class="notice-content">
                    <van-cell-group inset>
                        <van-cell title="接种前注意事项" is-link @click="onNoticeClick('before')" />
                        <van-cell title="接种后注意事项" is-link @click="onNoticeClick('after')" />
                        <van-cell title="常见问题" is-link @click="onNoticeClick('faq')" />
                    </van-cell-group>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import PageHeader from '@/components/common/PageHeader.vue';

const router = useRouter();

// 热门疫苗
const hotVaccines = ref([
    {
        id: 1,
        name: '流感疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
        id: 2,
        name: '新冠疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
        id: 3,
        name: '肺炎疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
        id: 4,
        name: '狂犬疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
        id: 5,
        name: '乙肝疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
        id: 6,
        name: 'HPV疫苗',
        image: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
]);

// 疫苗分类
const vaccineCategories = ref([
    { id: 1, name: '儿童计划免疫' },
    { id: 2, name: '成人常规疫苗' },
    { id: 3, name: '旅行疫苗' },
    { id: 4, name: '季节性疫苗' },
]);

// 点击疫苗
const onVaccineClick = (vaccine: any) => {
    showToast('该功能正在开发中');
    // 实际项目中跳转到疫苗详情页
    // router.push(`/vaccination/vaccine/${vaccine.id}`);
};

// 点击分类
const onCategoryClick = (category: any) => {
    showToast('该功能正在开发中');
    // 实际项目中跳转到分类页面
    // router.push(`/vaccination/category/${category.id}`);
};

// 点击须知
const onNoticeClick = (type: string) => {
    showToast('该功能正在开发中');
    // 实际项目中跳转到须知详情页
    // router.push(`/vaccination/notice/${type}`);
};
</script>

<style scoped lang="scss">
.vaccination-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间
    padding-bottom: 50px; // 为底部标签栏预留空间

    .page-content {
        padding: 16px;
    }

    .banner {
        margin-bottom: 16px;
        border-radius: 8px;
        overflow: hidden;

        .banner-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
    }

    .section {
        margin-bottom: 16px;

        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 12px;
            padding-left: 8px;
        }

        .vaccine-item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .vaccine-name {
                margin-top: 8px;
                font-size: 12px;
                color: #333;
            }
        }
    }
}
</style>